<script setup lang="ts">
import { ref, onBeforeMount } from 'vue'
import { $DoctorDetail, $DoctorSchedule } from '@/api/doctor'
import { $Booking } from '@/api/user'
import { useRoute } from 'vue-router'
const route = useRoute()

// 日期
var pickerDay = ref('')
// 上午 0，中午 1，下午 2
const day = ref('0')
// 预约
const reservation = () => {
    $Booking({
        id: sessionStorage.getItem('id'),
        doctorid: route.query.id,
        week: pickerDay.value,
        day: new Date(pickerDay.value).getDay() + day.value
    })
}

// 医生
const doctor = ref({
    name: '',
    position: '',
    department: 0,
    good: '',
    url: '',
    introduction: ''
})
const doctorData = ref([])
const type = (["内科", "外科", "儿科"])
onBeforeMount(() => {
    // 获取医生排班
    $DoctorSchedule({
        id: route.query.id
    }).then(res => {
        doctorData.value = res.data
    })
    // 获取医生详情
    $DoctorDetail({
        id: route.query.id
    }).then(res => {
        doctor.value = res.data
    })
})


</script>

<template>
    <div class="doctor">
        <img class="doctor-img" src="@/images/doctor/doctor-introduce-bg.jpg" alt="">
        <nav-content navData="&nbsp;&nbsp;>&nbsp;&nbsp;智慧医疗&nbsp;&nbsp;>&nbsp;&nbsp;医生介绍"></nav-content>
        <div class="doctor-details">
            <div class="doctor-details-top">
                <div class="doctor-details-top-img">
                    <img :src="doctor.url" alt="">
                </div>
                <div class="doctor-details-top-information">
                    <div class="doctor-details-top-name">{{ doctor.name }}</div>
                    <div class="doctor-details-top-position">{{ doctor.position }}</div>
                    <div class="doctor-details-top-department">{{ type[doctor.department] }}</div>
                    <div class="doctor-details-top-good">{{ doctor.good }}</div>
                </div>
            </div>
            <div class="doctor-details-visit">
                <div class="doctor-visit-reservation">
                    <div class="doctor-reservation-title">
                        <el-icon size="1.1vw">
                            <IEpAlarmClock />
                        </el-icon>
                        出诊信息
                    </div>
                    <div class="doctor-reservation-right">
                        <el-date-picker v-model="pickerDay" type="date" placeholder="请选择预约时间"
                            value-format="YYYY-MM-DD" />
                        <select name="day" id="" v-model="day">
                            <option value="0">上午</option>
                            <option value="1">中午</option>
                            <option value="2">下午</option>
                        </select>
                        <button class="doctor-reservation-btn" @click="reservation">预约</button>
                    </div>
                </div>
                <div class="doctor-details-time">
                    <table>
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th>星期日</th>
                                <th>星期一</th>
                                <th>星期二</th>
                                <th>星期三</th>
                                <th>星期四</th>
                                <th>星期五</th>
                                <th>星期六</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>上午</td>
                                <td v-for="item in doctorData[0]" :key="index">{{ item === '' ? '' : '√' }}</td>
                            </tr>
                            <tr>
                                <td>中午</td>
                                <td v-for="item in doctorData[1]" :key="index">{{ item === '' ? '' : '√' }}</td>
                            </tr>
                            <tr>
                                <td>下午</td>
                                <td v-for="item in doctorData[2]" :key="index">{{ item === '' ? '' : '√' }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="doctor-text">
                    <div class="doctor-text-title">医生简介</div>
                    <div class="doctor-text-body">
                        {{ doctor.introduction }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.doctor {
    .doctor-img {
        display: flex;
        width: 100vw;
        height: 50vh;
    }

    .doctor-details {
        display: flex;
        flex-direction: column;
        width: 67vw;
        height: 100vh;
        margin: 0 auto 10vh;

        .doctor-details-top {
            display: flex;
            width: 67vw;
            height: 39vh;
            background: url("@/images/doctor/introduce.png") no-repeat;
            background-size: 100% 100%;
            padding-top: 5vh;
            margin-bottom: 6vh;

            .doctor-details-top-img {
                flex: 1;
                display: flex;
                justify-content: center;

                img {
                    width: 10vw;
                    height: 29vh;
                }
            }

            .doctor-details-top-information {
                flex: 3;
                color: #fff;

                .doctor-details-top-name {
                    font-size: 1.6vw;
                    margin: 3vh 0 2vh;
                }

                .doctor-details-top-position {
                    font-size: 0.9vw;
                }

                .doctor-details-top-department {
                    font-size: 0.9vw;
                    margin: 2vh 0 5vh;
                }

                .doctor-details-top-good {
                    font-size: 0.8vw;
                }
            }

        }

        .doctor-details-visit {
            width: 67vw;
            height: 30vh;

            .doctor-visit-reservation {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 67vw;
                height: 7vh;
                color: #fff;
                background-color: #26a18f;
                padding: 0 2vw;

                .doctor-reservation-title {
                    font-size: 1vw;

                    .el-icon {
                        margin-right: 0.5vw;
                        // padding-top: 0.5vw;
                    }
                }

                .doctor-reservation-right {
                    display: flex;

                    :deep(.el-date-editor) {
                        --el-date-editor-width: 10vw;
                        font-size: 0.8vw;
                    }

                    :deep(.el-input__wrapper) {
                        box-shadow: none;
                        padding: 1vh 1vw;
                        border-radius: 0vh;
                    }

                    :deep(.el-input) {
                        --el-input-height: 4vh
                    }

                    :deep(.el-input__prefix-inner>:last-child) {
                        margin-right: 0.5vw;
                    }

                    select {
                        width: 5vw;
                        height: 4vh;
                        border: none;
                        border-left: 0.1vw solid #000;
                        font-size: 0.8vw;
                        color: #333;
                        outline: none;

                        option {
                            text-align: center;
                        }
                    }

                    .doctor-reservation-btn {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 5vw;
                        height: 3.5vh;
                        border-radius: 3.5vh;
                        border: none;
                        color: #fff;
                        font-size: 0.8vw;
                        background: #bcae4d;
                        cursor: pointer;
                        margin-left: 2vw;
                    }
                }

            }

            .doctor-details-time {
                table {
                    width: 67vw;
                    height: 20vh;
                    font-size: 1vw;
                    text-align: center;
                    table-layout: fixed;
                    border-spacing: 0.2vw;

                    th {
                        height: 6vh;
                        background-color: #eff9f8;
                    }

                    td {
                        height: 6vh;
                        color: #e96550;
                        font-weight: 800;
                        background-color: #f9f9f9;
                    }
                }
            }

        }

        .doctor-text {
            font-size: 1vw;
            margin-top: 6vh;

            .doctor-text-title {
                font-size: 1.5vw;
                margin-bottom: 4vh;
            }

            .doctor-text-body {
                color: #666666;
                text-indent: 2em;
                line-height: 2em;
            }
        }
    }
}
</style>